---
import { i18n } from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
import Icon from "../misc/Icon.astro";

export interface Props {
	skill: {
		id: string;
		name: string;
		description: string;
		icon?: string;
		category: string;
		level: "beginner" | "intermediate" | "advanced" | "expert";
		experience: string;
		relatedProjects?: string[];
		certifications?: string[];
		color?: string;
	};
	size?: "small" | "medium" | "large";
	showProgress?: boolean;
	showIcon?: boolean;
}

const {
	skill,
	size = "medium",
	showProgress = true,
	showIcon = true,
} = Astro.props;

// 技能等级颜色映射
const getLevelColor = (level: string) => {
	switch (level) {
		case "expert":
			return "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400";
		case "advanced":
			return "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400";
		case "intermediate":
			return "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400";
		case "beginner":
			return "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400";
		default:
			return "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400";
	}
};

// 技能等级文本映射
const getLevelText = (level: string) => {
	switch (level) {
		case "expert":
			return i18n(I18nKey.skillsExpert);
		case "advanced":
			return i18n(I18nKey.skillsAdvanced);
		case "intermediate":
			return i18n(I18nKey.skillsIntermediate);
		case "beginner":
			return i18n(I18nKey.skillsBeginner);
		default:
			return level;
	}
};

// 技能等级进度条宽度
const getLevelWidth = (level: string) => {
	switch (level) {
		case "expert":
			return "100%";
		case "advanced":
			return "80%";
		case "intermediate":
			return "60%";
		case "beginner":
			return "40%";
		default:
			return "20%";
	}
};

// 尺寸样式映射
const getSizeClasses = (size: string) => {
	switch (size) {
		case "small":
			return {
				container: "p-4",
				icon: "w-8 h-8",
				iconText: "text-lg",
				title: "text-base",
				description: "text-xs line-clamp-2",
				badge: "text-xs",
				progress: "h-1.5",
			};
		case "large":
			return {
				container: "p-6",
				icon: "w-14 h-14",
				iconText: "text-3xl",
				title: "text-xl",
				description: "text-sm line-clamp-3",
				badge: "text-sm",
				progress: "h-3",
			};
		default: // medium
			return {
				container: "p-5",
				icon: "w-10 h-10",
				iconText: "text-xl",
				title: "text-lg",
				description: "text-sm line-clamp-2",
				badge: "text-xs",
				progress: "h-2",
			};
	}
};

const sizeClasses = getSizeClasses(size);
const skillColor = skill.color || "#3B82F6";
---

<div class="bg-white dark:bg-slate-800/50 rounded-lg border border-black/10 dark:border-white/10 overflow-hidden hover:shadow-lg transition-all duration-300 group">
  <div class={sizeClasses.container}>
    <div class="flex items-start gap-4">
      <!-- 技能图标 -->
      {showIcon && skill.icon && (
        <div class={`rounded-lg flex items-center justify-center shrink-0 ${sizeClasses.icon}`} style={`background-color: ${skillColor}20`}>
          <Icon 
            icon={skill.icon} 
            class={sizeClasses.iconText} 
            color={skillColor}
            fallback={skill.name.charAt(0)}
            loading="eager"
          />
        </div>
      )}
      
      <div class="flex-1 min-w-0">
        <!-- 技能名称和等级 -->
        <div class="flex items-center justify-between mb-2">
          <h3 class={`font-semibold text-black/90 dark:text-white/90 ${sizeClasses.title} ${size === 'small' ? 'truncate' : ''}`}>
            {skill.name}
          </h3>
          <span class={`px-2 py-1 rounded-full shrink-0 ml-2 ${sizeClasses.badge} ${getLevelColor(skill.level)}`}>
            {getLevelText(skill.level)}
          </span>
        </div>
        
        <!-- 分类标签 -->
        {skill.category && (
          <div class="mb-2">
            <span class={`px-2 py-1 bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 rounded ${sizeClasses.badge}`}>
              {skill.category}
            </span>
          </div>
        )}
        
        <!-- 技能描述 -->
        <p class={`text-black/60 dark:text-white/60 mb-3 ${sizeClasses.description}`}>
          {skill.description}
        </p>
        
        <!-- 经验和进度条 -->
        {showProgress && (
          <div class="mb-3">
            <div class="flex justify-between text-sm mb-1">
              <span class="text-black/60 dark:text-white/60">{i18n(I18nKey.skillsExperience)}</span>
              <span class="text-black/80 dark:text-white/80">{skill.experience}</span>
            </div>
            <div class={`w-full bg-gray-200 dark:bg-gray-700 rounded-full ${sizeClasses.progress}`}>
              <div 
                class={`rounded-full transition-all duration-500 ${sizeClasses.progress}`}
                style={`width: ${getLevelWidth(skill.level)}; background-color: ${skillColor}`}
              ></div>
            </div>
          </div>
        )}
        
        <!-- 认证信息 -->
        {skill.certifications && skill.certifications.length > 0 && (
          <div class="mb-3">
            <div class="flex flex-wrap gap-1">
              {skill.certifications.map((cert) => (
                <span class={`px-2 py-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded ${sizeClasses.badge}`}>
                  🏆 {cert}
                </span>
              ))}
            </div>
          </div>
        )}
        
        <!-- 相关项目 -->
        {skill.relatedProjects && skill.relatedProjects.length > 0 && (
          <div class="text-sm text-black/60 dark:text-white/60">
            {i18n(I18nKey.skillsProjects)}: {skill.relatedProjects.length}
          </div>
        )}
      </div>
    </div>
  </div>
</div>

<style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>

<script>
  // 监听图标加载完成事件
  document.addEventListener('DOMContentLoaded', () => {
    const skillCard = document.currentScript?.parentElement;
    if (skillCard) {
      skillCard.classList.add('skill-card');
      
      // 监听图标准备就绪事件
      skillCard.addEventListener('iconify-ready', () => {
        // 图标加载完成，可以执行额外的初始化逻辑
        skillCard.classList.add('icons-loaded');
      });
    }
  });
</script>